<template>
  <p>Sum is: {{ sum }}</p>
  <button @click="increment">increment</button>
</template>

<script lang="ts">
  import {
    defineComponent,
    onBeforeMount,
    onBeforeUnmount,
    onBeforeUpdate,
    onErrorCaptured,
    onMounted,
    onRenderTracked,
    onRenderTriggered,
    onUnmounted,
    onUpdated,
    onActivated,
    onDeactivated,
    reactive,
    toRefs
  } from 'vue';

  interface State {
    sum: number;
    increment: () => void;
  }

  export default defineComponent({
    name: 'LifeCycle',
    setup: () => {
      console.log('setup');
      onBeforeMount(() => {
        console.log('onBeforeMount');
      });
      onMounted(() => {
        console.log('onMounted');
      });
      onBeforeUnmount(() => {
        console.log('onBeforeUnmount');
      });
      onUnmounted(() => {
        console.log('onUnmounted');
      });
      onBeforeUpdate(() => {
        console.log('onBeforeUpdate');
      });
      onUpdated(() => {
        console.log('onUpdated');
      });
      onErrorCaptured(() => {
        console.log('onErrorCaptured');
      });
      onRenderTracked(e => {
        // 跟踪依赖收集
        console.log('onRenderTracked');
        console.log(e);
      });
      onRenderTriggered(e => {
        // 监听数据变化
        console.log('onRenderTriggered');
        console.log(e);
      });
      onActivated(() => {
        console.log('onActivated');
      });
      onDeactivated(() => {
        console.log('onDeactivated');
      });
      const data: State = reactive({
        sum: 0,
        increment: () => {
          data.sum += 1;
        }
      });
      return {
        ...toRefs(data)
      };
    }
  });
</script>

<style scoped></style>
